/* eslint-disable consistent-return */
/* eslint-disable react/jsx-indent */
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  DownloadOutlined,
  DownOutlined,
  PlusOutlined,
  UploadOutlined,
  UpOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Row,
  Col,
  Card,
  Input,
  Button,
  Dropdown,
  Menu,
  Modal,
  message,
  Radio,
  Divider,
  Tabs,
  DatePicker,
  Badge,
  Tooltip,
  Select,
  Upload,
  InputNumber,
} from 'antd';
import queryString from 'query-string';
import moment from 'moment';
import Link from 'umi/link';
import router from 'umi/router';
import ProExportBtn from '@/pages/components/Problem/ProblemPage/ProExportBtn';
import ProModal from '@/pages/components/Problem/ProblemPage/ProModal';
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Authorized from '@/utils/Authorized';
import downloadFile, { requestHeadersMd5, getProPagination } from '@/utils/utils';
import styles from '@/utils/utils.less';
import ProTable from '@/pages/components/Problem/ProblemPage/ProTable';
import { checkPermissions } from '@/utils/authority';
import HOCSelect from '@/components/AntDesign/Select';
import Customer from '../../components/Customer';
import TextOverFlow from '../../components/TextOverFlow';
import ServiceRemark from '../../components/ServiceRemark';
import proIcon from '../../../assets/proIcon.png';
import CircleModal from '../../components/CircleModal';
import SearchPersonEs from '../../components/SearchPersonEs';

const FormItem = Form.Item;
const { TabPane } = Tabs;
const RadioButton = Radio.Button;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const { RangePicker } = DatePicker;
const { Option } = Select;
@connect(
  ({
    accuservicehandle: {
      pageData,
      detailHdl,
      refundObj,
      proListData,
      issWayArr,
      tabList,
      activeKey,
      expandForm,
      flag,
      formFieldsValue,
      matFileDictItem,
      coltFlag,
      downloadParams,
    },
    handle,
    login,
    loading,
    publicdata,
  }) => ({
    login,
    pageData,
    detailHdl,
    refundObj,
    proListData,
    handle,
    loading: loading.models.accuservicehandle,
    publicdata,
    issWayArr,
    tabList,
    activeKey,
    expandForm,
    flag,
    formFieldsValue,
    matFileDictItem,
    coltFlag,
    downloadParams,
  })
)
@Form.create()
class TableList extends PureComponent {
  state = {
    visGrants: false,
    visRefund: false,
    proVisible: false,
    selectedRows: [],
    selectedRowKeys: [],
    visHdlRemark: false,
    visComplete: false,
    circleVisible: false,
    stateMap: ['', 'success', 'default', 'warning'], // 第一项用
    stateMap1: ['', 'default', 'success', 'warning'], // 第一项用

    issState: null,
  };

  tableSearchLayout = {
    labelCol: { md: { span: 7 } },
    wrapperCol: { md: { span: 17 } },
  };

  searchLayout = {
    labelCol: {
      lg: {
        span: 10,
      },
    },
    wrapperCol: {
      xxl: {
        span: 14,
      },
      lg: {
        span: 10,
      },
    },
  };

  componentDidMount() {
    const {
      location,
      activeKey,
      dispatch,
      pageData: { pagination },
    } = this.props;
    const { isMenuLink } = queryString.parse(location.search);
    const tempActiveKey = queryString.parse(location.search).activeKey || activeKey;

    dispatch({
      type: 'accuservicehandle/updateModelData',
      payload: {
        activeKey: tempActiveKey,
      },
    });
    const proPagination = getProPagination(tempActiveKey, '5', pagination);
    if (isMenuLink) {
      this.resetAndGeLlist(location);
    } else {
      this.handleSearch(tempActiveKey, proPagination.current, proPagination.pageSize);
    }
    this.getDict();
    this.getServiceDicList();
  }

  // 字典
  getDict = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'handle/fetchDicList',
      payload: ['INS_SERVICE_TYPE', 'YES_NO_FLAG', 'ALRT_OBJ'],
    });
  };

  // 改变Table
  onSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({
      selectedRowKeys,
      selectedRows,
    });
  };

  // 查询列表
  handleSearch = (activeKey = '1', current = 1, pageSize = 10, queryParam, isClear = true) => {
    const { dispatch, form, login } = this.props;
    // 哪个系统
    const { systemList } = login;
    let userType;
    systemList.map(item => {
      if (item.isSelected) {
        userType = item.sysCode;
      }
      return true;
    });
    if (isClear) {
      this.setState({
        selectedRows: [],
        selectedRowKeys: [],
      });
    }
    form.validateFields(
      [
        'empName',
        'certNo',
        'custId',
        'areaId',
        'dateArr',
        'serTypeId',
        'refundFlag',
        'blngCs',
        'creId',
      ],
      (err, fieldsValue) => {
        if (err) return;
        const newFieldsValue = queryParam || fieldsValue;
        dispatch({
          type: 'accuservicehandle/updateModelData',
          payload: {
            formFieldsValue: newFieldsValue,
            activeKey,
          },
        });
        const tempFieldsValue = {};
        Object.keys(newFieldsValue).forEach(key => {
          if (newFieldsValue[key] && key === 'dateArr') {
            tempFieldsValue.startTime = newFieldsValue.dateArr[0].valueOf();
            tempFieldsValue.endTime = newFieldsValue.dateArr[1].valueOf();
            delete tempFieldsValue[key];
          } else {
            tempFieldsValue[key] =
              newFieldsValue[key] === undefined || newFieldsValue[key] === null
                ? null
                : newFieldsValue[key].trim();
          }
        });
        const pageArg = { currentPage: current, pageSize };
        const { refundState, issState } = this.state;
        const values = {
          accuSerHdlVo: {
            state: activeKey,
            ...tempFieldsValue,
            refundState: +activeKey === 3 ? refundState : undefined,
          },
          pageArg,
        };
        const valuesEs = {
          accuSerHdlVo: {
            state: activeKey,
            ...tempFieldsValue,
            issState,
          },
          pageArg,
        };
        const downloadParams = {
          ...tempFieldsValue,
          busiType: this.busiTypeParams(userType),
        };
        dispatch({
          type: 'accuservicehandle/updateModelData',
          payload: {
            downloadParams,
          },
        });
        if (Number(activeKey) === 5) {
          setTimeout(() => {
            const { proTable } = this.state;
            const proFormFieldsValue = { ...downloadParams };
            if (proTable.searchList) {
              proTable.searchList(proFormFieldsValue, current, pageSize);
            }
          });
        } else {
          if (Number(userType) === 4) {
            dispatch({
              type: 'accuservicehandle/fetchOsList',
              payload: values,
            });
            return;
          }
          dispatch({
            type: 'accuservicehandle/fetchList',
            payload: valuesEs,
          });
        }
      }
    );
  };

  // 问题人员busiType参数
  busiTypeParams = userType => {
    let busiType = null;
    if (userType === 1) {
      // 客服
      busiType = 27;
    } else if (userType === 3) {
      // 员工
      busiType = 24;
    } else if (userType === 4) {
      // 运行
      busiType = 6;
    }
    return busiType;
  };

  // 选择发放类型
  onIssState = e => {
    const {
      pageData: {
        pagination: { current, pageSize },
      },
      activeKey,
    } = this.props;
    this.state.issState = Number(e.target.value) === 5 ? null : e.target.value;
    this.handleSearch(activeKey, current, pageSize);
  };

  // 信息返款状态
  onRefundFlag = value => {
    const {
      pageData: {
        pagination: { current, pageSize },
      },
      activeKey,
    } = this.props;
    this.state.refundState = Number(value) === 3 ? null : value;
    this.handleSearch(activeKey, current, pageSize);
  };

  // 重置
  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    form.setFieldsValue({ dateArr: null });

    dispatch({
      type: 'accuservicehandle/updateModelData',
      payload: {
        formFieldsValue: {},
      },
    });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    const { activeKey } = this.props;
    this.handleSearch(activeKey, pagination.current, pagination.pageSize, undefined, false);
  };

  // 切换表格展开收起
  toggleForm = () => {
    const { dispatch, expandForm } = this.props;
    dispatch({
      type: 'accuservicehandle/updateModelData',
      payload: {
        expandForm: !expandForm,
      },
    });
  };

  // 点击复选框
  handleSelectRows = (rows, rowKeys) => {
    this.setState({ selectedRows: rows, selectedRowKeys: rowKeys });
  };

  // actity改变
  stateChange = key => {
    const { location, dispatch } = this.props;
    router.push({
      pathname: location.pathname,
      query: {
        activeKey: key,
      },
    });
    dispatch({
      type: 'accuservicehandle/updateModelData',
      payload: {
        activeKey: key,
      },
    });
    this.handleSearch(key);
  };

  // 取消办理
  cancelDeal = (accuSerHdlId, vno) => {
    const value = [{ accuSerHdlId, vno }];
    Modal.confirm({
      title: `你确定要取消办理吗？`,
      icon: <QuestionCircleOutlined />,
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        this.cancelDealPort(value);
      },
    });
  };

  cancelDealPort = value => {
    const {
      pageData: {
        pagination: { current, pageSize },
      },
      activeKey,
      dispatch,
    } = this.props;
    dispatch({
      type: 'accuservicehandle/cancelToDeal',
      payload: value,
      callback: isDisabled => {
        if (isDisabled) {
          this.handleSearch(activeKey, current, pageSize);
          message.success('取消办理成功！');
        } else {
          message.warning('取消办理失败!');
        }
      },
    });
  };

  // 办理备注
  hdlRemark = accuSerHdlId => {
    const { dispatch } = this.props;
    this.setState({
      busiId: accuSerHdlId,
    });
    this.handleModalVisible(true);
    dispatch({
      type: 'accuservicehandle/detailHdlRemark',
      payload: { busiId: accuSerHdlId },
    });
  };

  // 模态框显隐
  handleModalVisible = flag => {
    this.setState({
      visHdlRemark: !!flag,
    });
  };

  // 提交数据
  submitData = values => {
    const { dispatch } = this.props;
    const { busiId } = this.state;
    dispatch({
      type: 'accuservicehandle/addHdlRemark',
      payload: { ...values, busiId },
      callback: response => {
        if (response.success) {
          message.success('办理备注成功！');
          this.handleModalVisible();
        } else {
          message.warning(`${response.message || '办理备注失败！'}`);
        }
      },
    });
  };

  // 提交运行
  toRun = (accuSerHdlId, vno) => {
    const {
      pageData: {
        pagination: { current, pageSize },
      },
      activeKey,
      dispatch,
    } = this.props;
    const value = { accuSerHdlId, vno };
    Modal.confirm({
      title: `你确定要提交运行吗？`,
      icon: <QuestionCircleOutlined />,
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        dispatch({
          type: 'accuservicehandle/submitToRun',
          payload: value,
          callback: response => {
            if (response.success) {
              this.handleSearch(activeKey, current, pageSize);
              message.success('提交运行成功！');
            }
          },
        });
      },
    });
  };

  // 开始办理  updateToDealDetial（查看）
  toDeal = (accuSerHdlId, vno) => {
    const value = [{ accuSerHdlId, vno }];
    Modal.confirm({
      title: `你确定要开始办理吗？`,
      icon: <QuestionCircleOutlined />,
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        this.toDealPort(value);
      },
    });
  };

  // 批量提交运行
  toDealBatch = () => {
    const { selectedRows } = this.state;
    const {
      pageData: {
        pagination: { total },
      },
    } = this.props;
    if (Number(total) === 0) {
      message.warning('当前未有申报数据');
    } else if (selectedRows.length) {
      Modal.confirm({
        title: `是否对当前列表${selectedRows.length}条数据开始办理？`,
        icon: <QuestionCircleOutlined />,
        okText: '是',
        cancelText: '否',
        onOk: () => {
          const value = [];
          selectedRows.map(item => {
            value.push({ vno: item.vno, accuSerHdlId: item.accuSerHdlId });
            return true;
          });
          this.toDealPort(value);
        },
      });
    } else {
      Modal.confirm({
        title: `将对当前页签下的全部数据进行操作，是否继续？`,
        icon: <QuestionCircleOutlined />,
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          const value = [];
          this.toDealPort(value);
        },
      });
    }
  };

  // 批量开始办理
  toDealPort = value => {
    const {
      pageData: {
        pagination: { current, pageSize },
      },
      activeKey,
      dispatch,
    } = this.props;
    dispatch({
      type: 'accuservicehandle/updateToDeal',
      payload: value,
      callback: isDisabled => {
        if (isDisabled) {
          message.success('开始办理成功！');
          this.handleSearch(activeKey, current, pageSize);
        }
      },
    });
  };

  // 办理成功
  okComplete = () => {
    this.setState({
      visComplete: false,
    });
    const { accuSerHdlArr } = this.state;
    this.toDealCompletePort({ accuSerHdl: accuSerHdlArr });
  };

  // 取消办理
  cancelComplete = () => {
    this.setState({
      visComplete: false,
    });
  };

  // 批量办理
  toDealCompleteBatch = () => {
    const { form } = this.props;
    form.resetFields(['refundAmt', 'refundDate', 'remitUnitName', 'remark']);
    const { selectedRows } = this.state;
    if (selectedRows.length) {
      const value = [];
      selectedRows.map(item => {
        value.push({ vno: item.vno, accuSerHdlId: item.accuSerHdlId });
        return true;
      });
      Modal.confirm({
        title: `是否对当前列表${selectedRows.length}条数据标记办理成功？`,
        icon: <QuestionCircleOutlined />,
        okText: '是',
        cancelText: '否',
        onOk: () => {
          this.toDealCompletePort({ accuSerHdl: value });
        },
      });
    } else {
      message.warning('请至少选择一条数据！');
    }
  };

  // 办理完成
  toDealCompletePort = value => {
    const {
      pageData: {
        pagination: { current, pageSize },
      },
      activeKey,
      dispatch,
      form,
    } = this.props;
    form.resetFields(['refundAmt', 'refundDate', 'remitUnitName', 'remark']);
    dispatch({
      type: 'accuservicehandle/updateToDealComplete',
      payload: value.accuSerHdl,
      callback: isDisabled => {
        if (isDisabled) {
          this.handleSearch(activeKey, current, pageSize);
          message.success('办理完成成功！');
        } else {
          message.warning('办理完成失败!');
        }
      },
    });
  };

  // 新增返款信息
  refundAdd = accuSerHdlId => {
    const { dispatch } = this.props;
    dispatch({
      type: 'accuservicehandle/getRefund',
      payload: { accuSerHdlId },
    });
    this.setState({
      visRefund: true,
      accuSerHdlId,
    });
  };

  // f返款信息确定
  okRefund = () => {
    const {
      pageData: {
        pagination: { current, pageSize },
      },
      activeKey,
      dispatch,
      form,
    } = this.props;
    const { accuSerHdlId } = this.state;
    form.validateFields(['refundAmt', 'reimbAmt', 'affix', 'remark'], (err, values) => {
      const newValues = values;
      if (err) return;
      let fileName = '';
      if (values.affix && values.affix.fileList.length) {
        values.affix.fileList.map(c => {
          if (c.status === 'done' && c.response.success) {
            fileName += `${c.response.data},`;
          }
          return true;
        });
      }
      newValues.affix = fileName ? fileName.slice(0, fileName.length - 1) : null;
      dispatch({
        type: 'accuservicehandle/addRefund',
        payload: { ...newValues, accuSerHdlId },
        callback: res => {
          if (res.success) {
            this.handleSearch(activeKey, current, pageSize);
            this.setState({
              visRefund: false,
            });
            message.success('新增成功！');
          } else {
            message.warning(res.message);
          }
        },
      });
    });
  };

  // 取消返款
  cancelRefund = () => {
    this.setState({
      visRefund: false,
    });
  };

  // 原件发放
  grant = record => {
    const { form } = this.props;
    form.resetFields([
      'issWay',
      'exprsAddr',
      'exprsNo',
      'exprsCorpName',
      'exprsCorpName',
      'issRemark',
    ]);
    this.setState({
      visGrants: true,
      grantData: record,
    });
  };

  // 原件发放ok
  okGrants = () => {
    const { grantData } = this.state;
    const { form } = this.props;
    form.validateFields(
      ['issWay', 'exprsAddr', 'exprsNo', 'exprsCorpName', 'exprsCorpName', 'issRemark'],
      (err, fieldsValue) => {
        this.okGrantsPort({
          ...fieldsValue,
          accuSerHdlId: grantData.accuSerHdlId,
          vno: grantData.vno,
        });
      }
    );
    this.setState({
      visGrants: false,
      grantData: undefined,
      selectedRows: [],
      btnShow: '1',
    });
  };

  // 获取服务类型列表
  getServiceDicList = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'publicdata/fetchServiceDictList',
      payload: {
        serType: 2,
      },
    });
  };

  // 原件发放
  okGrantsPort = value => {
    const {
      pageData: {
        pagination: { current, pageSize },
      },
      activeKey,
      dispatch,
    } = this.props;
    dispatch({
      type: 'accuservicehandle/updateGrants',
      payload: value,
      callback: response => {
        if (response.success) {
          this.handleSearch(activeKey, current, pageSize);
          message.success('发放成功！');
        } else {
          message.warning(response.message);
        }
      },
    });
  };

  // 取消原件发放
  cancelGrants = () => {
    this.setState({
      visGrants: false,
      grantData: undefined,
      selectedRows: [],
      btnShow: '1',
    });
  };

  // 选择原件发放方式
  onChangeIssWay = e => {
    const { dispatch } = this.props;
    if (e.target.value) {
      this.setState({
        btnShow: e.target.value,
      });
      dispatch({
        type: 'accuservicehandle/updateModelData',
        payload: {
          flag: true,
        },
      });
    }
  };

  // 问题人员标记
  showModal = flag => {
    const { selectedRows } = this.state;
    if (selectedRows.length) {
      const tempArr = selectedRows.filter(item => Number(item.probFlag) === 1);
      if (tempArr.length) {
        message.error('问题人员无法做相关操作');
        return;
      }
      this.setState({
        proVisible: flag,
      });
    } else {
      message.warning('请至少选择一项');
    }
  };

  toggleProModal = flag => {
    this.setState({
      proVisible: flag,
    });
  };

  // 问题人员确定
  proHandleOk = () => {
    const {
      pageData: {
        pagination: { current, pageSize },
      },
      activeKey,
    } = this.props;
    this.toggleProModal(false);
    this.handleSearch(activeKey, current, pageSize);
  };

  // 原件流转弹窗
  showCircleModal = () => {
    const { selectedRowKeys, selectedRows } = this.state;
    const { dispatch } = this.props;
    if (selectedRowKeys.length) {
      const flag = selectedRows.some(item => item.serTypeId !== selectedRows[0].serTypeId);
      const flagType = selectedRows.some(item => Number(item.dataType) === 2);
      if (!flag) {
        if (flagType) {
          return message.warning('所选数据为供应商执行的数据，只可查看，不可标记原件流转');
        }
        dispatch({
          type: 'accuservicehandle/fetchMatList',
          payload: {
            serType: 2,
            serTypeId: selectedRows[0].serTypeId,
            areaId: selectedRows[0].areaId,
          },
        }).then(() => [this.toggleCircleModal(true)]);
      } else {
        message.warning('请选择相同的服务类型');
      }
    } else {
      message.warning('请至少选择一项');
    }
  };

  toggleCircleModal = flag => {
    this.setState({
      circleVisible: flag,
    });
  };

  // 下载
  downExcel = () => {
    const { login, activeKey } = this.props;
    const { systemList } = login;
    const { refundState } = this.state;
    let userType;
    systemList.map(item => {
      if (item.isSelected) {
        userType = item.sysCode;
      }
      return true;
    });
    const { form, pageData, proListData } = this.props;
    const proTotal = proListData.pagination.total;
    const {
      pagination: { total },
    } = pageData;
    form.validateFields(
      ['empName', 'certNo', 'custId', 'areaId', 'dateArr', 'serTypeId', 'refundFlag', 'creId'],
      (err, fieldsValue) => {
        if (err) return;
        const newFieldsValue = fieldsValue;
        Object.keys(newFieldsValue).forEach(key => {
          if (newFieldsValue[key] === undefined) {
            newFieldsValue[key] = null;
          } else if (key === 'dateArr') {
            newFieldsValue.startTime = newFieldsValue.dateArr[0].valueOf();
            newFieldsValue.endTime = newFieldsValue.dateArr[1].valueOf();
            delete newFieldsValue[key];
          }
        });
        newFieldsValue.state = Number(activeKey) === 5 ? undefined : activeKey;
        newFieldsValue.refundState = Number(activeKey) === 3 ? refundState : undefined;
        if (Number(activeKey) === 5) {
          if (Number(proTotal) === 0) {
            message.warning('无查询结果，不可导出');
          } else {
            downloadFile({ ...newFieldsValue, busiType: 4 }, '/osApi/problem/accu/export', 'POST');
          }
        } else if (Number(total) === 0) {
          message.warning('无查询结果，不可导出');
        } else {
          downloadFile(
            newFieldsValue,
            Number(userType) === 4
              ? '/esApi/accuSerHdl/exportOsExcel'
              : '/esApi/accuSerHdl/exportEsExcel',
            'POST'
          );
        }
      }
    );
  };

  // 导出
  outExcel = () => {
    const { login, activeKey } = this.props;
    const { systemList } = login;
    let userType;
    systemList.map(item => {
      if (item.isSelected) {
        userType = item.sysCode;
      }
      return true;
    });
    const { selectedRowKeys } = this.state;
    if (selectedRowKeys.length) {
      if (Number(activeKey) === 5) {
        this.setState({
          excelLoading: true,
        });
        downloadFile({ detIds: selectedRowKeys }, '/osApi/problem/accu/export', 'POST', () => {
          this.setState({
            excelLoading: false,
          });
        });
      } else {
        this.setState({
          excelLoading: true,
        });
        downloadFile(
          { accuSerHdlIds: selectedRowKeys },
          Number(userType) === 4
            ? '/esApi/accuSerHdl/exportOsExcel'
            : '/esApi/accuSerHdl/exportEsExcel',
          'POST',
          () => {
            this.setState({
              excelLoading: false,
            });
          }
        );
      }
    } else {
      Modal.confirm({
        title: `如果不选择数据，则默认导出当前列表下所有数据`,
        icon: <QuestionCircleOutlined />,
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.downExcel();
        },
      });
    }
  };

  // 批量办理
  hdlExport = () => {
    router.push('/providentfundmanagement/accuhandle/batch');
  };

  inReInfor = () => {
    router.push('/providentfundmanagement/accuhandle/reImport');
  };

  // 批量原件发放
  batchGrant = () => {
    router.push('/providentfundmanagement/accuhandle/batchGrant');
  };

  // 原件流转ok
  circleHandleOk = values => {
    const { selectedRowKeys } = this.state;
    const {
      dispatch,
      activeKey,
      pageData: { pagination },
    } = this.props;
    const inParam = { ...values, accuSerHdlIds: selectedRowKeys };
    dispatch({
      type: 'accuservicehandle/circle',
      payload: inParam,
      callback: response => {
        if (response.success) {
          this.toggleCircleModal(false);
          this.handleSearch(activeKey, pagination.current, pagination.pageSize);
          message.success('操作成功！');
        } else {
          message.warning('操作失败!');
        }
      },
    });
  };

  async resetAndGeLlist(location) {
    const { dispatch } = this.props;
    const { queryParam } = location;
    dispatch({
      type: 'accuservicehandle/updateModelData',
      payload: {
        expandForm: Boolean(queryParam),
      },
    });
    await this.handleFormReset();
    await this.handleSearch(location.query.activeKey, undefined, undefined, queryParam);
    dispatch({
      type: 'global/changeIsMenuLink',
      payload: location,
    });
  }

  renderSimpleForm() {
    const {
      form: { getFieldDecorator },
      formFieldsValue,
      activeKey,
    } = this.props;
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="姓名" {...this.tableSearchLayout}>
              {getFieldDecorator('empName', {
                initialValue: formFieldsValue.empName,
              })(<Input placeholder="请输入姓名" maxLength={15} />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="证件号" {...this.tableSearchLayout}>
              {getFieldDecorator('certNo', {
                initialValue: formFieldsValue.certNo,
              })(<Input placeholder="请输入证件号" maxLength={18} />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" onClick={() => this.handleSearch(activeKey)}>
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                展开 <DownOutlined />
              </a>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  renderAdvancedForm() {
    const {
      form: { getFieldDecorator },
      handle: { flagData },
      publicdata: { serviceDictList },
      formFieldsValue,
      activeKey,
    } = this.props;
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="姓名" {...this.tableSearchLayout}>
              {getFieldDecorator('empName', {
                initialValue: formFieldsValue.empName,
              })(<Input placeholder="请输入姓名" maxLength={15} />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="证件号" {...this.tableSearchLayout}>
              {getFieldDecorator('certNo', {
                initialValue: formFieldsValue.certNo,
              })(<Input placeholder="请输入证件号" maxLength={18} />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="服务类型" {...this.tableSearchLayout}>
              {getFieldDecorator('serTypeId', {
                initialValue: formFieldsValue.serTypeId,
              })(
                <HOCSelect
                  placeholder="请选择"
                  style={{ width: '100%' }}
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  {serviceDictList.map(item => (
                    <Option key={item.serTypeId}>{item.serTypeIdName}</Option>
                  ))}
                </HOCSelect>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="客户名称" {...this.tableSearchLayout}>
              {getFieldDecorator('custId', {
                initialValue: formFieldsValue.custId,
              })(
                <Customer
                  attr
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="是否有返款" {...this.tableSearchLayout}>
              {getFieldDecorator('refundFlag', {
                initialValue: formFieldsValue.refundFlag,
              })(
                <HOCSelect
                  placeholder="请选择"
                  style={{ width: '100%' }}
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  {flagData.map(item => (
                    <Option key={item.itemCode}>{item.itemName}</Option>
                  ))}
                </HOCSelect>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="创建人" {...this.tableSearchLayout}>
              {getFieldDecorator('creId', {
                initialValue: formFieldsValue.creId,
              })(
                <SearchPersonEs
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="所属客服">
              {getFieldDecorator('blngCs', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.blngCs,
              })(
                <SearchPersonEs
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="操作时间" {...this.tableSearchLayout}>
              {getFieldDecorator('dateArr', {
                initialValue: formFieldsValue.dateArr,
              })(<RangePicker style={{ width: '100%' }} />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <div style={{ overflow: 'hidden' }}>
              <div style={{ float: 'right', marginBottom: 24 }}>
                <Button type="primary" onClick={() => this.handleSearch(activeKey)}>
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                  重置
                </Button>
                <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                  收起
                  <UpOutlined />
                </a>
              </div>
            </div>
          </Col>
        </Row>
      </Form>
    );
  }

  renderForm() {
    const { expandForm } = this.props;
    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
  }

  render() {
    const { excelLoading } = this.state;
    const { location, login } = this.props;
    const { pathname } = location;
    const tempUrl = pathname.split('/index')[0];
    const { systemList } = login;
    let userType;
    systemList.map(item => {
      if (item.isSelected) {
        userType = item.sysCode;
      }
      return true;
    });
    const diffShow = Number(userType) === 4 ? styles.hide : styles.show;
    const diffShow1 = Number(userType) === 4 ? styles.show : styles.hide;

    const {
      form: { getFieldDecorator },
    } = this.props;
    const {
      loading,
      pageData,
      detailHdl,
      refundObj,
      issWayArr,
      tabList,
      activeKey,
      flag,
      matFileDictItem,
      coltFlag,
      downloadParams,
    } = this.props;
    const {
      selectedRows,
      selectedRowKeys,
      proVisible,
      circleVisible,
      visHdlRemark,
      visGrants,
      btnShow,
      visRefund,
      visComplete,
      stateMap,
      stateMap1,
      // confirmLoading,
    } = this.state;
    const uploadProps = {
      name: 'file',
      action: '/esApi/fileServer/uploadFile',
      headers: {
        authorization: 'authorization-text',
        ...requestHeadersMd5(),
      },
      onChange({ file }) {
        if (file.status === 'done' && file.response.success) {
          message.success(`${file.name} 上传成功！`);
        } else if (file.status === 'error') {
          message.error(`${file.name} 上传失败！`);
        }
      },
    };
    const hdlMenu = (
      <Menu>
        <Menu.Item>
          <a onClick={this.hdlExport}>办理结果导入</a>
        </Menu.Item>
        <Menu.Item>
          <a onClick={this.toDealCompleteBatch}>标记办理成功</a>
        </Menu.Item>
      </Menu>
    );
    const dealMenu = (
      <Menu>
        <Menu.Item>
          <a onClick={this.inReInfor}>导入返款信息</a>
        </Menu.Item>
        <Menu.Item>
          <a onClick={this.outExcel} loading={excelLoading}>
            导出
          </a>
        </Menu.Item>
      </Menu>
    );
    const moreMenu = (
      <Menu>
        {(checkPermissions(['cs:accuHdlProb:addProb', 'business:accuHdlProb:addProb']) && (
          <Menu.Item>
            <a onClick={() => this.showModal(true)}>标记问题人员</a>
          </Menu.Item>
        )) ||
          null}
        <Menu.Item>
          <a onClick={this.outExcel} loading={excelLoading}>
            导出
          </a>
        </Menu.Item>
      </Menu>
    );

    // 运行办理中 待办理 员工已办理2019
    const menuDealOs = record => (
      <Menu>
        {checkPermissions('business:accuSerHdl:updateSubmitToRun') &&
        Number(record.submitFlag) === 2 ? (
          <Menu.Item key="detail">
            <Link to={`${tempUrl}/detail?accuSerHdlId=${record.accuSerHdlId}`}>查看</Link>
          </Menu.Item>
        ) : null}

        {checkPermissions('business:accuSerHdl:updateAccuSerHdl') && (
          <Menu.Item key="update">
            <Link
              to={`${tempUrl}/update?accuSerHdlId=${record.accuSerHdlId}&&submitFlag=${
                record.submitFlag
              }`}
            >
              修改
            </Link>
          </Menu.Item>
        )}
        {checkPermissions('business:accuSerHdl:ancellationAccuSerHdl') && (
          <Menu.Item onClick={() => this.cancelDeal(record.accuSerHdlId, record.vno)}>
            取消办理
          </Menu.Item>
        )}
        <Menu.Item onClick={() => this.hdlRemark(record.accuSerHdlId)}>办理备注</Menu.Item>
      </Menu>
    );

    // 员工办理中2019
    const menuProssEs = record => (
      <Menu>
        {/* 查看跟办理完成的权限码互斥 */}
        {checkPermissions('business:accuSerHdl:updateAccuSerHdl') && (
          <Menu.Item key="update">
            <Link
              to={`${tempUrl}/update?accuSerHdlId=${record.accuSerHdlId}&&submitFlag=${
                record.submitFlag
              }`}
            >
              修改
            </Link>
          </Menu.Item>
        )}
        {checkPermissions('business:accuSerHdl:ancellationAccuSerHdl') && (
          <Menu.Item onClick={() => this.cancelDeal(record.accuSerHdlId, record.vno)}>
            取消办理
          </Menu.Item>
        )}
        <Menu.Item onClick={() => this.hdlRemark(record.accuSerHdlId)}>办理备注</Menu.Item>
        {checkPermissions('business:accuSerHdl:updateOriginalIssue') && (
          <Menu.Item>
            <a onClick={() => this.grant(record)}>原件发放</a>
          </Menu.Item>
        )}
      </Menu>
    );

    // 运行已办理

    const menuCompleteOs = record => (
      <Menu>
        {Number(record.issState) === 1 &&
          record.accessFlag === 1 &&
          checkPermissions('business:accuSerHdl:updateOriginalIssue') && (
            <Menu.Item>
              <a onClick={() => this.grant(record)}>原件发放</a>
            </Menu.Item>
          )}
        {Number(record.refundFlag) === 1 &&
          Number(record.refundState) === 2 &&
          checkPermissions('business:accuSerHdl:insertAccuRefundInfo') && (
            <Menu.Item>
              <a onClick={() => this.refundAdd(record.accuSerHdlId)}>新增返款信息</a>
            </Menu.Item>
          )}
        <Menu.Item onClick={() => this.hdlRemark(record.accuSerHdlId)}>办理备注</Menu.Item>
      </Menu>
    );
    const columnsDeal = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: (text, record) =>
          Number(record.probFlag) === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img alt="" src={proIcon} />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '证件号',
        dataIndex: 'certNo',

        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 170,
          },
        }),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => <TextOverFlow text={text} />,
      },

      {
        title: '是否有返款',
        dataIndex: 'refundFlagName',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
      },

      {
        title: '服务类型',
        dataIndex: 'serTypeIdName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '创建人',
        dataIndex: 'creName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '所属客服',
        dataIndex: 'blngCs',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => text || '--',
      },
      {
        title: '操作',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 150,
          },
        }),
        render: (text, record) => {
          if (record.updateJurisdFlag === 2) {
            return <Link to={`${tempUrl}/detail?accuSerHdlId=${record.accuSerHdlId}`}>查看</Link>;
          }
          if (Number(userType) === 4) {
            return (
              <span>
                {/* 运行 */}
                <span>
                  <Link to={`${tempUrl}/detail?accuSerHdlId=${record.accuSerHdlId}`}>查看</Link>
                  <Divider type="vertical" />
                </span>
                {checkPermissions([
                  'business:accuSerHdl:updateSubmitToRun',
                  'business:accuSerHdl:updateAccuSerHdl',
                  'business:accuSerHdl:ancellationAccuSerHdl',
                ]) ? (
                  <Dropdown overlay={menuDealOs(record)}>
                    <a>
                      更多 <DownOutlined />
                    </a>
                  </Dropdown>
                ) : (
                  <a onClick={() => this.hdlRemark(record.accuSerHdlId)}>办理备注</a>
                )}
              </span>
            );
          }
          // 除运行之外
          return (
            <span>
              {Number(record.submitFlag) === 2 && record.accessFlag === 1 ? (
                <Authorized authority="business:accuSerHdl:updateSubmitToRun" noMatch={null}>
                  <span>
                    <a onClick={() => this.toRun(record.accuSerHdlId, record.vno)}>提交运行</a>
                    <Divider type="vertical" />
                  </span>
                </Authorized>
              ) : (
                <span>
                  <Link to={`${tempUrl}/detail?accuSerHdlId=${record.accuSerHdlId}`}>查看</Link>
                  {record.accessFlag === 1 && <Divider type="vertical" />}
                </span>
              )}
              {(record.accessFlag === 1 &&
                (checkPermissions([
                  'business:accuSerHdl:updateSubmitToRun',
                  'business:accuSerHdl:updateAccuSerHdl',
                  'business:accuSerHdl:ancellationAccuSerHdl',
                ]) ? (
                  <Dropdown overlay={menuDealOs(record)}>
                    <a>
                      更多 <DownOutlined />
                    </a>
                  </Dropdown>
                ) : (
                  <a onClick={() => this.hdlRemark(record.accuSerHdlId)}>办理备注</a>
                ))) ||
                null}
            </span>
          );
        },
      },
    ];
    const columnsProcess = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: (text, record) =>
          Number(record.probFlag) === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img alt="" src={proIcon} />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 170,
          },
        }),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '服务类型',
        dataIndex: 'serTypeIdName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '是否有返款',
        dataIndex: 'refundFlagName',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
      },

      {
        title: '创建人',
        dataIndex: 'creName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '所属客服',
        dataIndex: 'blngCs',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => text || '--',
      },
      {
        title: '操作',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 150,
          },
        }),
        render: (text, record) => {
          if (record.updateJurisdFlag === 2) {
            return <Link to={`${tempUrl}/detail?accuSerHdlId=${record.accuSerHdlId}`}>查看</Link>;
          }
          return (
            <Fragment>
              <span>
                <Link to={`${tempUrl}/detail?accuSerHdlId=${record.accuSerHdlId}`}>查看</Link>
                {record.accessFlag === 1 && <Divider type="vertical" />}
              </span>
              {(record.accessFlag === 1 &&
                (checkPermissions([
                  'business:accuSerHdl:updateAccuSerHdl',
                  'business:accuSerHdl:ancellationAccuSerHdl',
                ]) ? (
                  <Dropdown overlay={menuProssEs(record)}>
                    <a>
                      更多 <DownOutlined />
                    </a>
                  </Dropdown>
                ) : (
                  <a onClick={() => this.hdlRemark(record.accuSerHdlId)}>办理备注</a>
                ))) ||
                null}
            </Fragment>
          );
        },
      },
    ];
    const columnsComplete = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: (text, record) =>
          Number(record.probFlag) === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img alt="" src={proIcon} />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 170,
          },
        }),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '服务类型',
        dataIndex: 'serTypeIdName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '是否有返款',
        dataIndex: 'refundFlagName',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '返款信息状态',
        dataIndex: 'refundStateName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            width: 150,
          },
        }),
        className: diffShow1,
        render: (text, record) =>
          record.refundStateName ? (
            <Badge
              key={record.refundState}
              status={stateMap[record.refundState]}
              text={record.refundStateName}
            />
          ) : (
            '--'
          ),
      },
      {
        title: '创建人',
        dataIndex: 'creName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      // 此列员工有，运行没有
      {
        title: '原件发放状态',
        dataIndex: 'issStateName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            width: 120,
          },
        }),
        className: diffShow,
        render: (text, record) =>
          record.issStateName ? (
            <Badge
              key={record.issState}
              status={stateMap1[record.issState]}
              text={record.issStateName}
            />
          ) : (
            '--'
          ),
      },
      {
        title: '所属客服',
        dataIndex: 'blngCs',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => text || '--',
      },
      {
        title: '操作',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 150,
          },
        }),
        render: (text, record) => {
          if (record.updateJurisdFlag === 2) {
            return <Link to={`${tempUrl}/detail?accuSerHdlId=${record.accuSerHdlId}`}>查看</Link>;
          }
          return (
            <Fragment>
              <span>
                <Link to={`${tempUrl}/detail?accuSerHdlId=${record.accuSerHdlId}`}>查看</Link>
                {record.accessFlag === 1 && <Divider type="vertical" />}
              </span>
              {record.accessFlag === 1 && (
                <Dropdown overlay={menuCompleteOs(record)}>
                  <a>
                    更多 <DownOutlined />
                  </a>
                </Dropdown>
              )}
            </Fragment>
          );
        },
      },
    ];
    const columnsCancel = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: (text, record) =>
          Number(record.probFlag) === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img alt="" src={proIcon} />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 170,
          },
        }),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '服务类型',
        dataIndex: 'serTypeIdName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '是否有返款',
        dataIndex: 'refundFlagName',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
      },

      {
        title: '创建人',
        dataIndex: 'creName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '所属客服',
        dataIndex: 'blngCs',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => text || '--',
      },
      {
        title: '操作',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 120,
          },
        }),
        render: (text, record) => (
          <Fragment>
            <Link to={`${tempUrl}/detail?accuSerHdlId=${record.accuSerHdlId}`}>查看</Link>
          </Fragment>
        ),
      },
    ];
    const tabPane1 = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          {Number(userType) === 4 ? (
            <Col span={10} offset={0}>
              <Authorized authority="business:accuSerHdl:startHandleAccuSerHdl" noMatch={null}>
                <Button type="primary" style={{ marginRight: 8 }} onClick={this.toDealBatch}>
                  开始办理
                </Button>
              </Authorized>
              <Dropdown overlay={moreMenu}>
                <Button>
                  更多
                  <DownOutlined />
                </Button>
              </Dropdown>
            </Col>
          ) : (
            <Col span={10} offset={0}>
              <Authorized authority="business:accuSerHdl:insertAccuSerHdl" noMatch={null}>
                <Link to={`${tempUrl}/add`}>
                  <Button type="primary" style={{ marginRight: 8 }}>
                    <PlusOutlined className={styles.iconStyle} />
                    新增
                  </Button>
                </Link>
              </Authorized>
              <Authorized authority="business:accuSerHdl:insertOrigInalRemark" noMatch={null}>
                <Button style={{ marginRight: 8 }} onClick={this.showCircleModal}>
                  原件流转
                </Button>
              </Authorized>
              <Button style={{ marginRight: 8 }} onClick={this.outExcel} loading={excelLoading}>
                {!excelLoading && <DownloadOutlined />}
                导出
              </Button>
            </Col>
          )}
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={pageData}
          rowKey="accuSerHdlId"
          columns={columnsDeal}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPane2 = (
      <div>
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            marginBottom: 16,
          }}
        >
          <div>
            {/* 运行 */}
            {Number(userType) === 4 ? (
              <Col span={24} offset={0}>
                <Authorized authority="business:accuSerHdl:signSuccessAccuSerHdl" noMatch={null}>
                  <Dropdown overlay={hdlMenu}>
                    <Button type="primary" style={{ marginRight: 8 }}>
                      办理完成
                    </Button>
                  </Dropdown>
                </Authorized>
                <Authorized authority="business:accuSerHdl:insertOrigInalRemark" noMatch={null}>
                  <Button style={{ marginRight: 8 }} onClick={this.showCircleModal}>
                    原件流转
                  </Button>
                </Authorized>
                <Dropdown overlay={moreMenu}>
                  <Button>
                    更多
                    <DownOutlined />
                  </Button>
                </Dropdown>
              </Col>
            ) : (
              <Fragment>
                {checkPermissions('business:accuSerHdl:accuHdlBatchIssue') && (
                  <Button style={{ marginRight: 8 }} onClick={this.batchGrant} type="primary">
                    批量发放
                  </Button>
                )}
                <Button style={{ marginRight: 8 }} onClick={this.outExcel} loading={excelLoading}>
                  {!excelLoading && <DownloadOutlined />}
                  导出
                </Button>
              </Fragment>
            )}
          </div>
          {Number(userType) === 4 ? null : (
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <RadioGroup defaultValue="5" onChange={this.onIssState}>
                <RadioButton value="5">全部</RadioButton>
                <RadioButton value="1">未发放</RadioButton>
                <RadioButton value="2">已发放</RadioButton>
                <RadioButton value="3">无原件</RadioButton>
              </RadioGroup>
            </div>
          )}
        </div>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={pageData}
          rowKey="accuSerHdlId"
          columns={columnsProcess}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );

    const tabPane3 = (
      <div>
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            marginBottom: 16,
          }}
        >
          <div>
            {checkPermissions('business:accuSerHdl:insertOrigInalRemark') && (
              <Button type="primary" style={{ marginRight: 8 }} onClick={this.showCircleModal}>
                原件流转
              </Button>
            )}
            {Number(userType) === 4 ? (
              <Dropdown overlay={dealMenu}>
                <Button>
                  更多 <DownOutlined />
                </Button>
              </Dropdown>
            ) : (
              <Fragment>
                {checkPermissions('business:accuSerHdl:accuHdlBatchIssue') && (
                  <Button style={{ marginRight: 8 }} onClick={this.batchGrant}>
                    批量发放
                  </Button>
                )}
                <Button style={{ marginRight: 8 }} onClick={this.outExcel} loading={excelLoading}>
                  {!excelLoading && <DownloadOutlined />}
                  导出
                </Button>
              </Fragment>
            )}
          </div>
          {Number(userType) === 4 ? (
            <div style={{ display: 'flex', alignItems: 'center' }} className={styles.tabSelect}>
              <FormItem label="返款信息状态" {...this.searchLayout}>
                {getFieldDecorator('refundState')(
                  <HOCSelect
                    style={{ width: 120 }}
                    showSearch
                    optionFilterProp="children"
                    onChange={this.onRefundFlag}
                  >
                    <Option key="3">全部</Option>
                    <Option key="1">已完成</Option>
                    <Option key="2">未完成</Option>
                  </HOCSelect>
                )}
              </FormItem>
            </div>
          ) : (
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <RadioGroup defaultValue="5" onChange={this.onIssState}>
                <RadioButton value="5">全部</RadioButton>
                <RadioButton value="1">未发放</RadioButton>
                <RadioButton value="2">已发放</RadioButton>
                <RadioButton value="3">无原件</RadioButton>
              </RadioGroup>
            </div>
          )}
        </div>

        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={pageData}
          rowKey="accuSerHdlId"
          columns={columnsComplete}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPane4 = (
      <div>
        <React.Fragment>
          <Authorized
            authority={['cs:accuHdlProb:addProbFdbk', 'business:accuHdlProb:addProbFdbk']}
            noMatch={null}
          >
            <Button
              type="primary"
              onClick={() => {
                router.push(
                  `/providentfundmanagement/accuhandle/batchFeedback?busiType=${this.busiTypeParams(
                    userType
                  )}`
                );
              }}
              style={{ marginRight: 8, marginBottom: 16 }}
            >
              批量反馈
            </Button>
          </Authorized>
          <ProExportBtn selectedRowKeys={selectedRowKeys} downloadParams={downloadParams} />
        </React.Fragment>
        <ProTable
          onRef={e => {
            this.setState({ proTable: e });
          }}
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          onSelectRow={this.handleSelectRows}
          proUrl={`${tempUrl}/problem`}
          busiType={this.busiTypeParams(userType)}
        />
      </div>
    );
    const tabPane5 = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Col span={10} offset={0}>
            <Button onClick={this.outExcel} type="primary" loading={excelLoading}>
              {!excelLoading && <DownloadOutlined />}
              导出
            </Button>
          </Col>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={pageData}
          rowKey="accuSerHdlId"
          columns={columnsCancel}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPaneTem = ['', tabPane1, tabPane2, tabPane3, tabPane5, tabPane4];
    const formItemLayout = {
      labelCol: {
        xl: {
          span: 6,
        },
      },
      wrapperCol: {
        xl: {
          span: 16,
        },
      },
    };
    const formItemLayout1 = {
      labelCol: {
        sm: 8,
      },
      wrapperCol: {
        sm: 16,
      },
    };
    const issWayList = issWayArr.map(options => (
      <Radio value={options.itemCode} key={options.itemCode}>
        {options.itemName}
      </Radio>
    ));

    return (
      <PageHeaderWrapper>
        <Card className={styles.searchCard}>
          <div className={styles.tableListForm}>{this.renderForm()}</div>
        </Card>
        <Card className={styles.tabCard}>
          <div className={styles.tableList}>
            <Tabs activeKey={activeKey} onChange={this.stateChange}>
              {tabList.map(pane => (
                <TabPane tab={pane.itemName} key={pane.itemCode} forceRender>
                  {tabPaneTem[pane.itemCode]}
                </TabPane>
              ))}
            </Tabs>
            <ServiceRemark
              visHdlRemark={visHdlRemark}
              handleModalVisible={this.handleModalVisible}
              submitData={this.submitData}
              detailHdl={detailHdl}
            />
          </div>
        </Card>
        <CircleModal
          visible={circleVisible}
          selectedRows={selectedRows}
          onOk={this.circleHandleOk}
          matFileDictItem={matFileDictItem}
          onCancel={() => this.toggleCircleModal(false)}
          coltFlag={coltFlag}
        />
        <Modal
          title="原件发放"
          visible={visGrants}
          onOk={this.okGrants}
          onCancel={this.cancelGrants}
        >
          <Form>
            <Row>
              <Col>
                <FormItem
                  {...formItemLayout}
                  label={
                    <span>
                      <span style={{ color: 'red', marginRight: 3 }}>*</span>原件发放方式
                    </span>
                  }
                >
                  {getFieldDecorator('issWay', {
                    rules: [
                      {
                        required: false,
                      },
                    ],
                    initialValue: '1',
                  })(<RadioGroup onChange={this.onChangeIssWay}>{issWayList}</RadioGroup>)}
                </FormItem>
              </Col>
            </Row>
            {Number(btnShow) === 2 ? (
              <Row>
                <Row>
                  <Col>
                    <FormItem {...formItemLayout} label={<span>邮寄地址</span>}>
                      {getFieldDecorator('exprsAddr', {
                        rules: [
                          {
                            required: flag,
                            message: '请输入邮寄地址',
                          },
                        ],
                      })(<Input placeholder="请输入" />)}
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col>
                    <FormItem {...formItemLayout} label={<span>快递单号</span>}>
                      {getFieldDecorator('exprsNo', {
                        rules: [
                          {
                            required: flag,
                            message: '请输入快递单号',
                          },
                        ],
                      })(<Input placeholder="请输入" />)}
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col>
                    <FormItem {...formItemLayout} label={<span>快递公司</span>}>
                      {getFieldDecorator('exprsCorpName', {
                        rules: [
                          {
                            required: flag,
                            message: '请输入快递公司',
                          },
                        ],
                      })(<Input placeholder="请输入" />)}
                    </FormItem>
                  </Col>
                </Row>
              </Row>
            ) : null}
            <Row>
              <Col>
                <FormItem {...formItemLayout} label={<span>备注</span>}>
                  {getFieldDecorator('issRemark', {
                    rules: [
                      {
                        required: false,
                        message: '请输入不得超过100字的备注',
                      },
                    ],
                  })(<TextArea placeholder="请输入" style={{ height: 100 }} />)}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Modal>
        {/* 新增返款 */}
        <Modal
          title="新增返款信息"
          visible={visRefund}
          onOk={this.okRefund}
          onCancel={this.cancelRefund}
          destroyOnClose
        >
          <Form>
            <Row>
              <Col>
                <FormItem {...formItemLayout1} label={<span>报销金额(元)</span>}>
                  {getFieldDecorator('reimbAmt', {
                    rules: [
                      {
                        required: true,
                        message: '请输入不超过50个字符的报销金额（元）',
                        pattern: /^\d+$|^\d+[.]?\d+$/,
                        max: 50,
                      },
                    ],
                    initialValue: refundObj.reimbAmt ? refundObj.reimbAmt.toFixed(2) : undefined,
                  })(<Input disabled={!!refundObj.reimbAmt} placeholder="请输入" />)}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col>
                <FormItem {...formItemLayout1} label={<span>本次返款金额(元)</span>}>
                  {getFieldDecorator('refundAmt', {
                    rules: [
                      {
                        required: true,
                        message: '请输入小数点不超过2位的数字返款金额（元）',
                        pattern: /^[0-9]{0,5}(\.[0-9]{1,2})?$/,
                      },
                    ],
                  })(<InputNumber placeholder="请输入" step={0.01} style={{ width: '100%' }} />)}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col>
                <FormItem {...formItemLayout1} label={<span>上传凭证</span>}>
                  {getFieldDecorator('affix', {
                    rules: [
                      {
                        required: false,
                        message: '请上传上传凭证',
                      },
                    ],
                  })(
                    <Upload {...uploadProps}>
                      <Button>
                        <UploadOutlined /> 上传附件
                      </Button>
                    </Upload>
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col>
                <FormItem {...formItemLayout1} label={<span>返款备注</span>}>
                  {getFieldDecorator('remark', {
                    rules: [
                      {
                        required: false,
                        message: '请输入返款备注',
                      },
                    ],
                  })(<Input placeholder="请输入" />)}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Modal>
        {/*  标记办理成功 */}
        <Modal
          title="标记办理成功"
          visible={visComplete}
          onOk={this.okComplete}
          onCancel={this.cancelComplete}
        >
          <Form>
            <Row>
              <Col>
                <FormItem {...formItemLayout1} label={<span>执行结果</span>}>
                  办理成功
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Modal>
        {proVisible && (
          <ProModal
            selectedRows={selectedRows}
            selectedRowKeys={selectedRowKeys}
            onOk={this.proHandleOk}
            busiType={this.busiTypeParams(userType)}
            onCancel={() => this.toggleProModal(false)}
            isProType
          />
        )}
      </PageHeaderWrapper>
    );
  }
}
export default TableList;
